<template>
  <div>
    <c-query-toolbar @query="handleQuery" :loading="queryLoading" :params="queryParams" v-show="showQuery"
      :query-button-disabled="disabled">
      <template #toolbar-left>
        <slot name="toolbar-left" />
      </template>
      <template #toolbar-right>
        <slot name="toolbar-right" />
      </template>
      <el-form-item label="角色名称">
        <el-input v-model.trim="queryParams.name" clearable></el-input>
      </el-form-item>
    </c-query-toolbar>
    <el-table class="c-mg-t-5p" :data="data" border v-loading="tableLoading">
      <el-table-column type="selection" width="30" align="center" />
      <el-table-column prop="name" label="角色名称" sortable="custom" width="150"></el-table-column>
      <el-table-column prop="remarks" label="角色备注" min-width="150"></el-table-column>
      <el-table-column prop="createTime" width="130" label="创建时间" sortable="custom">
        <template #default="{ row }">
          <span>{{ toShortDatetimeString(row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="最近更新时间" width="130" sortable="custom">
        <template #default="{ row }">
          <span>{{ toShortDatetimeString(row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column width="80" label="菜单权限" align="center">
        <template #default="{ row }">
          <span class="c-link" @click="openMenuPermissionDialog(row.id)">查看</span>
        </template>
      </el-table-column>
      <slot name="column"></slot>
    </el-table>
    <el-pagination class="c-mg-t-5p" layout="total, sizes, prev, pager, next, jumper" :total="total"
      v-model:current-page="getDataParams.pageIndex" v-model:page-size="getDataParams.pageSize"
      @change="handlePageChange" />
    <menu-permission-dialog ref="menuPermissionDialogRef" />
  </div>
</template>
<script setup>
import roleApi from "@/api/sys/role";
import { ref, useTemplateRef } from "vue";
import { toShortDatetimeString } from "@/utils/common.ts"
import menuPermissionDialog from "./menuPermissionDialog.vue";
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  },
  showQuery: {
    type: Boolean,
    default: true
  },
  showCheckbox: {
    type: Boolean,
    default: false
  },
  inDialog: {
    type: Boolean,
    default: false
  }
})
const queryParams = ref({
  name: ""
})
const total = ref(0)
const queryLoading = ref(false)
const menuPermissionDialogRef = useTemplateRef("menuPermissionDialogRef")
const tableLoading = defineModel("tableLoading", {
  type: Boolean,
  default: false
})
const data = ref([])

const expandQuery = defineModel("expandQuery", {
  type: Boolean,
  default: true
})

const handleQuery = async (params) => {
  getDataParams.value = { ...getDataParams.value, ...params };
  await getData();
}
const handlePageChange = async () => {
  await getData();
}
const openMenuPermissionDialog = async (roleId) => {
  await menuPermissionDialogRef.value.openByRoleId(roleId);
}

const getDataParams = ref({ pageIndex: 1, pageSize: 10 });
const getData = async () => {
  queryLoading.value = true
  tableLoading.value = true
  const res = await roleApi.getPageList(getDataParams.value);
  data.value = res.data.list;
  total.value = res.data.total;
  queryLoading.value = false
  tableLoading.value = false
}


defineExpose({
  getData
})
</script>